<template>
	<view class="container">
		<!-- 背景图片 -->
		<view class="background">

		</view>
		<!-- 标题 -->
		<view class="title">
			<text>阳光自习室</text>
		</view>
		<!-- 座位区域 -->
		<view class="seats">
			<view v-for="(seat, index) in seatsList" :key="index" class="seat" :class="{ 'occupied': seat.isOccupied }">
				<image :src="getSeatImage(seat)" mode="aspectFit" class="seat-box" @click="toggleSeat(seat)"></image>
			</view>
		</view>
		<!-- 功能按钮区域 -->
		<view class="button-container">
			<button class="start-button" @click="startStudy">{{ isStudying ? '暂停学习' : '开始学习' }}</button>
		</view>
		<!-- 学习统计区域 -->
		<view class="statistics">
			<text>今日学习时长: {{ studyTime }} 分钟</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				seatsList: [{
						isOccupied: false
					},
					{
						isOccupied: true
					},
					{
						isOccupied: true
					},
					{
						isOccupied: false
					},
					{
						isOccupied: true
					},
					{
						isOccupied: true
					},
					{
						isOccupied: false
					},
					{
						isOccupied: false
					},
					{
						isOccupied: false
					},
					{
						isOccupied: false
					},
					{
						isOccupied: true
					},
					{
						isOccupied: true
					},
					{
						isOccupied: true
					},
					{
						isOccupied: true
					},
					{
						isOccupied: true
					},
					{
						isOccupied: true
					},
					{
						isOccupied: true
					},
					{
						isOccupied: true
					},
					{
						isOccupied: true
					},
					{
						isOccupied: false
					},
					{
						isOccupied: true
					},
					{
						isOccupied: false
					},
					{
						isOccupied: false
					},
					{
						isOccupied: true
					},
					{
						isOccupied: false
					},
					{
						isOccupied: true
					},
					{
						isOccupied: false
					},
					{
						isOccupied: true
					},
					{
						isOccupied: false
					},
					{
						isOccupied: true
					},
					{
						isOccupied: false
					},
					{
						isOccupied: false
					},
					{
						isOccupied: true
					},
					{
						isOccupied: true
					},
					{
						isOccupied: true
					},
					{
						isOccupied: true
					},
					{
						isOccupied: false
					},
					{
						isOccupied: true
					},
					{
						isOccupied: true
					},
					{
						isOccupied: false
					},
					{
						isOccupied: true
					},
					{
						isOccupied: false
					},
					{
						isOccupied: true
					},
					{
						isOccupied: true
					},
					{
						isOccupied: true
					},
					{
						isOccupied: true
					},
					{
						isOccupied: true
					},
					{
						isOccupied: true
					},
					{
						isOccupied: true
					},
					{
						isOccupied: false
					}
				],
				studyTime: 0,
				isStudying: false,
				countdown: '60:00',
				timer: null
			};
		},
		methods: {
			startStudy() {
				uni.navigateTo({
					url:'/pages/room/studySigle/studySigle'
				})
			},
			getSeatImage(seat) {
				if (seat.isOccupied) {
					return '/static/image/座位.png';
				}
				return '/static/image/座位未选中.png';
			},
			toggleSeat(seat) {
				seat.isOccupied = !seat.isOccupied;
				uni.showToast({
					title: '请立刻开始学习，不然1分钟后将释放位置',
					icon: 'error'
				})
				setTimeout(function() {
					if (!this.isStudying) seat.isOccupied = !seat.isOccupied;
					uni.showToast({
						title: '监测到没有学习，已释放位置',
						icon: 'error'
					})
				}, 1 * 60 * 1000)
			}
		}
	};
</script>

<style scoped>
	.container {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}

	.background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		background: linear-gradient(45deg, #ffffff 0%, #68cc6b 99%, #f4f663 100%);
	}

	.background image {
		width: 100%;
		height: 100%;
	}

	.title {
		margin-top: 30px;
		text-align: center;
		font-size: 20px;
		font-weight: bold;
		color: orange;
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	}

	.seats {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 20px;
		margin-left:10%;
		width: 80%;
		background-color: #68cc6b;
		
		
	}

	.seat {
		width: 40px;
		height: 40px;
		margin: 10px;
	}

	.seat image {
		width: 30px;
		height: 30px;
	}

	.occupied {
		opacity: 0.8;
	}

	.button-container {
		display: flex;
		justify-content: center;
		margin-top: 50px;
	}

	.start-button,
	.rest-button {
		width: 150px;
		height: 40px;
		line-height: 40px;
		margin: 0 10px;
		background-color: #ffd700;
		color: #000000;
		font-size: 18px;
		border-radius: 20px;
		box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
	}

	.statistics {
		margin-top: 30px;
		text-align: center;
		font-size: 18px;
		color: #ffffff;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
	}

	.member-list {
		margin-top: 30px;
		padding: 20px;
		background-color: rgba(255, 255, 255, 0.3);
		border-radius: 10px;
		margin-left: 20px;
		margin-right: 20px;
	}

	.member-list-title {
		font-size: 20px;
		font-weight: bold;
		color: #ffffff;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
		margin-bottom: 10px;
	}

	.member-item {
		font-size: 16px;
		color: #ffffff;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
		margin-bottom: 5px;
	}

	.countdown-container {
		position: fixed;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
	}

	.countdown-circle {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.8);
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	}

	.countdown-text {
		font-size: 24px;
		font-weight: bold;
		color: #333;
	}
</style>